<template>
  <div class="follow-list">
    <ul class="tab-list flex-cont">
      <li class="flex"
          v-for="(item, index) in tabList" :key="index" @click="handleToggleTabbar(item.id)">
        <span v-bind:class="{active: activeId == item.id}">{{item.name}}</span>
      </li>
    </ul>

    <scroller  lock-x scrollbar-y height="-40" use-pullup :pullup-config="pullupConfig2" ref="demo2" @on-pullup-loading="load2">

      <ul class="list">
        <li class="flex-box-align" v-for="(item, index) in dataList" :key="index" >
          <img :src="item.patientUserCoreDTO.images[0].fileUrl" alt="" v-if="item.patientUserCoreDTO.images.length">
          <img src="" alt="" v-else>
          <span class="flex">{{item.patientUserCoreDTO.trueName}}</span>
          <span class="btn-record" @click="linkToRecordList(item.patientId)">随访复诊记录</span>
        </li>
      </ul>
      <div v-if="noData" class="no-data">没有更多内容</div>
    </scroller>

  </div>
</template>
<script>
  import { Scroller } from 'vux';
  import {parseUrlParams} from "../../../wechat/static/util/util";
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  export default {
    data() {
      return {
        activeId: "week",
        tabList: [
          {id: 'week',name: "一周内"},
          {id: 'oneMonth',name: "一个月"},
          {id: 'threeMonth',name: "三个月"}
        ],
        dataList: [],
        pullupConfig2: {
          content: '上拉加载更多',
          downContent: '松开进行加载',
          upContent: '上拉加载更多',
          loadingContent: '加载中...'
        },
        pageIndex:1,
        dataForm:'',
        loading:true,
        noData:false
      }
    },
    components: {
      Scroller
    },
    mounted() {
      this.getList(this.activeId)
    },
    methods: {
      load2 () {
        if(!this.loading) return false;
        let { pageIndex, pageCount} = this.dataForm;
        if (pageCount <= this.pageIndex){
          setTimeout(() => {
            this.$refs.demo2.disablePullup()
            this.noData = true
          }, 100)
          return false;
        }
        this.loading = false;
        this.pageIndex++;
        setTimeout(() => {
          this.getList(this.activeId)
          this.$refs.demo2.donePullup()
        }, 100)
      },
      getList(argument) {
        let  url = CONSTANT.URL.PATIENT.PATIENTLIST,
          param = {pageIndex:this.pageIndex,pageSize:10}
        common.requestAjax(url,JSON.stringify({queryType: argument}),param,(res)=>{
          if(res.status == 200){
            this.loading = true;
            let data = res.data,
              pageCount = data.pageCount,
              bussData = data.bussData
            if(pageCount == 0||pageCount == 1){
              this.$refs.demo2.disablePullup()
              this.noData = true
            }
            this.dataForm = data;
            this.dataList =  this.pageIndex <= pageCount ? this.dataList.concat(bussData) : this.dataList
          }else{

          }
        })
      },
      handleToggleTabbar(id) {
        this.activeId = id;
        let url = CONSTANT.URL.PATIENT.PATIENTLIST,
          param = {pageIndex:this.pageIndex,pageSize:10}
        common.requestAjax(url,JSON.stringify({queryType: id}),param,(res)=>{
          if(res.status == 200){
            this.loading = true;
            let data = res.data,
              pageCount = data.pageCount,
              bussData = data.bussData
            if(pageCount == 0||pageCount == 1){
              this.$refs.demo2.disablePullup()
              this.noData = true
            }
            this.dataForm = data;
            this.dataList =  bussData
          }else{

          }
        })
      },
      linkToRecordList(id) {
        this.$router.push({path: "/follow/record/list", query: {id: id}})
      }
    }
  };
</script>
<style lang="less">
  .xs-plugin-pullup-container{
    font-size: 12px;
    bottom: -50px;
  }
  .no-data{
    padding-top: .5rem;
    color: #999;
    font-size: 14px;
    bottom: 0rem;
    text-align: center;
    position: relative;
  }
  .follow-list {
    font-size: .34rem;
    .tab-list {
      padding: .4rem 0 .25rem 0;
      border-bottom: 1px solid #ccc;
      li {
        text-align: center;
      }
      .active {
        color: #0063AE;
        position: relative;
        &:after {
          content: "";
          position: absolute;
          width: 100%;
          height: .03rem;
          background-color: #0063AE;
          left: 0;
          bottom: -.29rem;
        }
      }
    }
    .list {
      li {
        padding: .17rem 0.21rem .17rem 0;
        margin-left: .21rem;
        border-bottom: 1px solid #e7e7e7;
        img {
          width: .76rem;
          height: .76rem;
          vertical-align: middle;
        }
        span {
          margin-left: .28rem;
        }
        .btn-record {
          width: 2rem;
          height: .6rem;
          line-height: .6rem;
          text-align: center;
          background-color: #f8f8f8;
          border: 1px solid #dfdfdf;
          border-radius: .06rem;
          font-size: .26rem;
          color: #444;
        }
      }
    }
  }
</style>
